<template>
  <div class="app">
    药品名称:<el-input
      v-model="search"
      size="small"
      placeholder="请输入药品名称"
      @blur="select"
    />

    药品分类：
    <el-select v-model="value" @change="select" filterable placeholder="Select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <el-button text @click="openDia" class="leading"> 导入药品信息 </el-button>

    <el-dialog v-model="dialogFormVisible" title="药品信息">
      药品名称:<el-input
        v-model="searchdialog"
        size="small"
        placeholder="请输入药品名称"
        @blur="selectDia"
      
      />

      药品分类：
      <el-select
        v-model="valuedialog"
        @change="selectDia"
        filterable
        placeholder="Select"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button type="primary" @click="addEg" class="leading">导入</el-button>
      <el-table
        :data="getMessageDia"
        max-height="auto"
        border
        style="width: 100%"
        ref="multipleTableRef"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="序号" width="60" />
        <el-table-column prop="drugName" label="药品名称" width="100" />
        <el-table-column prop="drugSort" label="药品分类" width="100" />
        <el-table-column prop="drugNumber" label="数量" width="120" />
        <el-table-column prop="drugUnit" label="单位" width="120" />
        <el-table-column prop="drugSpecification" label="规格" width="120" />
      </el-table>

      <el-pagination
        class="pagination"
        background
        v-model:page-size="pageSize"
        @current-change="pageDiaChange"
        layout="prev, pager, next"
        :total="store.state.message.tableTotal"
      />
    </el-dialog>
    <el-table :data="getMessage" max-height="auto" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" width="150" />
      <el-table-column prop="drugName" label="药品名称" width="120" />
      <el-table-column prop="drugSort" label="药品分类" width="120" />
      <el-table-column prop="drugNumber" label="数量" width="120" />
      <el-table-column prop="drugUnit" label="单位" width="120" />
      <el-table-column prop="drugSpecification" label="规格" width="120" />
      <el-table-column prop="createDate" label="创建日期" width="400" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
            class="delete"
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      background
      v-model:page-size="pageSize"
      @current-change="pageChange"
      layout="prev, pager, next"
      :total="store.state.message.tableTotal"
    />
  </div>
</template>
    
    
     
    
    
    <script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { onBeforeMount } from "vue";
import { computed } from "vue";
import { clippingParents } from "@popperjs/core";
import { useStore, mapGetters, mapMutations } from "vuex";
const store = useStore();
const getMessage = computed(
  mapGetters(["getMessage"]).getMessage.bind({
    $store: store,
  })
);
const getMessageDia = computed(
  mapGetters(["getMessageDia"]).getMessageDia.bind({
    $store: store,
  })
);
const searchData = mapMutations(["searchData"]).searchData.bind({
  $store: store,
});

const filterData = mapMutations(["filterData"]).filterData.bind({
  $store: store,
});
const addData = mapMutations(["addData"]).addData.bind({
  $store: store,
});

const deleteData = mapMutations(["deleteData"]).deleteData.bind({
  $store: store,
});

// filterData();
// searchData("浮萍")

const setMessageData = mapMutations(["setMessageData"]).setMessageData.bind({
  $store: store,
});
onBeforeMount(() => {
  setMessageData({
    drugName: search.value,
    drugSort: value.value,
    currentPage: 1,
    pageSize: 5,
    status: 1,
  });
});
const pageChange = (currentPage: any) => {
  setMessageData({
    drugName: search.value,
    drugSort: value.value,
    currentPage: currentPage,
    pageSize: 5,
    status: 1,
  });
};
const openDia = () => {
  console.log(1);
  dialogFormVisible.value = true;
  setMessageData({
    drugName: searchdialog.value,
    drugSort: valuedialog.value,
    currentPage: 1,
    pageSize: 5,
    status: 0,
  });
};
const pageDiaChange = (currentPage: any) => {
  setMessageData({
    drugName: searchdialog.value,
    drugSort: valuedialog.value,
    currentPage: currentPage,
    pageSize: 5,
    status: 0,
  });
};
const pageSize = ref(5);
//搜索
const search = ref("");
const value = ref("");

const searchdialog = ref("");
const valuedialog = ref("");

const select = () => {
  setMessageData({
    drugName: search.value,
    drugSort: value.value,
    currentPage: 1,
    pageSize: pageSize.value,
    status: 1,
  });
  // goto(1)
};
const selectDia = () => {
  setMessageData({
    drugName: searchdialog.value,
    drugSort: valuedialog.value,
    currentPage: 1,
    pageSize: pageSize.value,
    status: 0,
  });
  // goto(1)
};
const addEg = () => {
  // console.log("确定添加");
  dialogFormVisible.value = false;
  addData(multipleSelection);
  setMessageData({
    drugName: search.value,
    drugSort: value.value,
    currentPage: 1,
    pageSize: 5,
    status: 1,
  });
};
const multipleSelection = ref<User[]>([]);
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;

  console.log(val);
};
interface User {
  name: string;
  address: string;
}
const options = [
  {
    value: "",
    label: "全部",
  },
  {
    value: "中草药",
    classify: "中草药",
  },
  {
    value: "中成药",
    classify: "中成药",
  },
  {
    value: "非处方",
    classify: "非处方",
  },
];

const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);

const formLabelWidth = "140px";
const input = ref("");
const now = new Date();
const form = reactive({
  drug_name: "",
  classify: "",
  data: "",
  remark: "g",
  sepc: "1g",
  create_date: dayjs(now).format("YYYY-MM-DD"),
});

const data = ref(store.state.message.tableData);

const deleteRow = (id: any) => {
  deleteData(id);
  setMessageData({
    drugName: search.value,
    drugSort: value.value,
    currentPage: 1,
    pageSize: 5,
    status: 1,
  });
};
</script>
    
    <style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.delete {
  background-color: red;
  padding: 10px;
}
.leading {
  background-color: rgb(35, 163, 249);
  margin: 20px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 200px;
}
.el-input {
  width: 200px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>